

<template>
    <view>
        <scroll-view
            class="scroll-wrapper"
            :style="{ top: top + 'px' }"
            scroll-y
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
        >
            <view class="wrapper">
                <image :src="resource.weal_activity_bg" webp class="bg" mode="widthFix" />
                <view style="height: 492rpx"></view>
                <view class="content paddingX15">
                    <view class="title-wrapper translateX flex-align-center">
                        <image
                            :src="resource.weal_activity_title_1"
                            style="width: 446rpx; height: 32rpx"
                        />
                    </view>
                    <view class="flex paddingT38">
                        <image
                            class="flex-shrink0 marginT4"
                            :src="resource.weal_activity_flag"
                            style="width: 28rpx; height: 28rpx"
                        />
                        <view class="font5 paddingL10 color-1">
                            <text class="bold">规则：</text>
                            1.活动期间注册的新用户（自12月25日0时-5日24时）可领
                            <text class="color-theme">限时8元无门槛优惠券+199源石</text>
                            ，即可
                            <text class="color-theme">0元</text>
                            享9.9元购买一盒活动。
                        </view>
                    </view>
                    <view class="flex paddingT20 paddingB24">
                        <image
                            class="flex-shrink0 marginT4"
                            :src="resource.weal_activity_flag"
                            style="width: 28rpx; height: 28rpx"
                        />
                        <view class="font5 paddingL10 color-1">
                            2.所得奖品需自行支付
                            <text class="color-theme">15元邮费</text>
                            ，或满
                            <text class="color-theme">五</text>
                            件商品享
                            <text class="color-theme">包邮</text>
                            ，三个工作日内发货（目前受疫情影响暂无法发货，我们会在恢复物流的第一时间为您发货）
                        </view>
                    </view>
                </view>
                <view class="content paddingX15 marginT38">
                    <view class="title-wrapper translateX flex-align-center">
                        <image
                            :src="resource.weal_activity_title_2"
                            style="width: 364rpx; height: 32rpx"
                        />
                    </view>
                    <view class="paddingT26 flex-align-center color-1 bold font6">
                        源力积累，祈福成功！
                    </view>
                    <view class="paddingT8 paddingB17 flex-align-between">
                        <view
                            v-for="item in list1"
                            :key="item.id"
                            class="goods-wrapper flex-align-center"
                        >
                            <image :src="item.spu.cover" class="image" mode="aspectFit" />
                        </view>
                    </view>
                </view>
                <view class="content paddingX15 marginT38">
                    <view class="title-wrapper translateX flex-align-center">
                        <image
                            :src="resource.weal_activity_title_3"
                            style="width: 408rpx; height: 32rpx"
                        />
                    </view>
                    <view class="flex paddingT38 paddingB20">
                        <image
                            class="flex-shrink0 marginT4"
                            :src="resource.weal_activity_flag"
                            style="width: 28rpx; height: 28rpx"
                        />
                        <view class="font5 paddingL10 color-1">
                            <text class="bold">规则：</text>
                            1、活动期间（自25日0时-5日24时），无论新老用户，凡充值100元起，即可获得额外3%源石，大客户（消费满5w元即可成为大客户）可获得额外5%源石，充值金额不支持提现。
                        </view>
                    </view>
                    <view class="flex-align-center paddingB24">
                        <view
                            class="rank-btn font6 color-white flex-align-center"
                            @click="recharge"
                        >
                            去充值
                        </view>
                    </view>
                </view>

                <view
                    class="paddingX15 paddingT20 paddingB30 color-white font4"
                    style="opacity: 0.8"
                >
                    <view class="text-center">微信小程序@超级玛特SuperMarts</view>
                    <view class="text-center paddingT4">微信公众号@超级玛特SuperMarts</view>
                    <view class="text-center paddingT4">客服@超级小可爱</view>
                    <view class="text-center paddingT4">
                        活动期间流水成就房暂时关闭使用,活动结束后恢复上线
                    </view>
                    <view class="text-center paddingT4">@本活动最终解释权归本平台所有</view>
                </view>
            </view>
        </scroll-view>
        <rank1 ref="rank1" />
    </view>
</template>

<script>
import resource from '@/utils/resource'
import rank1 from './rank1'
import store from '@/store'

export default {
    components: { rank1 },
    props: {
        statusBarHeight: Number,
        activityId: Number
    },
    data() {
        return {
            resource,
            refreshing: false,
            requesting: false,
            list1: [],
            list2: [],
            list3: []
        }
    },
    computed: {
        top() {
            return this.statusBarHeight + uni.upx2px(72) + 45
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        pullRefresh() {
            getData()
        },
        async getData() {
            if (this.requesting) return
            this.requesting = true
            const res = await this.$service.weal.activityTabDetail()
            if (res) {
                this.list1 = res.substituteGoodsList.slice(0, 4)
                this.list2 = res.callGoodsList
                this.list3 = res.niuGoodsList
            }
            setTimeout(() => {
                this.refreshing = false
                this.requesting = false
            }, 1000)
        },
        recharge() {
            if (!this.$common.checkLogin()) return
            const user = store.getters.user
            this.$common.showKefu(`我要充值 (${user.username})`)
        },
        showRank1() {
            this.$refs.rank1.show()
        }
    }
}
</script>
<style lang="scss" scoped>
.scroll-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}
.wrapper {
    background: linear-gradient(180deg, #922dff 0%, #2f4abd 100%);
}
.bg {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}
.content {
    position: relative;
    background: #ffffff;
    box-shadow: inset 0px 0px 10px 5px rgba(143, 75, 241, 0.15);
    border-radius: 10px;
    margin-left: 30rpx;
    margin-right: 30rpx;
    .title-wrapper {
        position: absolute;
        top: -36rpx;
        width: 560rpx;
        height: 72rpx;
        background: linear-gradient(360deg, #6832dd 0%, #ab5dff 100%);
        border-radius: 36rpx;
    }
    .scroll-goods-wrapper {
        overflow: hidden;
        height: 180rpx;
        white-space: nowrap;
        width: 100%;
        .goods-wrapper {
            display: inline-block;
            margin-right: 16rpx;
        }
    }
    .goods-wrapper {
        width: 152rpx;
        height: 180rpx;
        background: #ffffff;
        border-radius: 12rpx;
        border: 4rpx solid #8f4bf1;
        .image {
            width: 142rpx;
            height: 165rpx;
        }
    }
    .rank-btn {
        width: 286rpx;
        height: 64rpx;
        background: linear-gradient(360deg, #5da6ff 0%, #1ed3c5 100%);
        border-radius: 32rpx;
    }
    .share-btn {
        position: absolute;
        right: 40rpx;
        margin: 0;
        width: 140rpx;
        height: 52rpx;
        line-height: 52rpx;
        background: linear-gradient(180deg, #ff9e30 0%, #ff5d5d 100%);
        border-radius: 26rpx;
        color: #fff;
        font-size: 28rpx;
    }
}
</style>